<template>
  <div class="coupon-wrapper">
    <h2>优惠券中心</h2>
    
    <!-- 显示可领取的优惠券 -->
    <div v-if="coupons.length" class="coupon-list">
      <div 
        v-for="coupon in coupons" 
        :key="coupon.id" 
        class="coupon-item"
      >
        <p>{{ coupon.name }} - {{ coupon.discount }} 元</p>
        <button 
          :disabled="isCouponReceived(coupon.id)" 
          @click="receiveCoupon(coupon)"
        >
          {{ isCouponReceived(coupon.id) ? '已领取' : '领取优惠券' }}
        </button>
      </div>
    </div>

    <!-- 显示已领取的优惠券 -->
    <div v-if="receivedCoupons.length" class="received-coupons">
      <h3>已领取优惠券</h3>
      <ul>
        <li v-for="coupon in receivedCoupons" :key="coupon.id">
          {{ coupon.name }} - {{ coupon.discount }} 元
		  <router-link to="/pages/index/index">
          <button @click="useCoupon(coupon)">使用</button>
		  </router-link>
        </li>
      </ul>
    </div>

    <!-- 使用优惠券后的总金额显示 -->
    <div v-if="selectedCoupon" class="total">
      <p>总金额: {{ totalAmount }} 元</p>
      <p>使用优惠券 {{ selectedCoupon.name }} 后的金额: {{ discountedAmount }} 元</p>
    </div>
  </div>
</template>

this.$router.replace('/pages/index/index')

<script>
export default {
  data() {
    return {
      totalAmount: 100, // 初始金额
      coupons: [
        { id: 1, name: "满100减20", discount: 20 },
        { id: 2, name: "满200减50", discount: 50 },
        { id: 3, name: "10元优惠券", discount: 10 }
      ], // 可领取的优惠券
      receivedCoupons: [], // 已领取的优惠券
      selectedCoupon: null, // 当前使用的优惠券
    };
  },
  computed: {
    // 计算使用优惠券后的金额
    discountedAmount() {
      if (this.selectedCoupon) {
        return (this.totalAmount - this.selectedCoupon.discount).toFixed(2);
      }
      return this.totalAmount.toFixed(2);
    }
  },
  methods: {
    // 检查优惠券是否已领取
    isCouponReceived(couponId) {
      return this.receivedCoupons.some(coupon => coupon.id === couponId);
    },
    
    // 领取优惠券
    receiveCoupon(coupon) {
      if (!this.isCouponReceived(coupon.id)) {
        this.receivedCoupons.push(coupon);
      }
    },
    
    // 使用优惠券
    useCoupon(coupon) {
      this.selectedCoupon = coupon;
    }
  }
};
</script>

<style scoped>
.coupon-wrapper {
  font-family: Arial, sans-serif;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.coupon-list, .received-coupons {
  margin-top: 20px;
}

.coupon-item {
  background-color: #f9f9f9;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.total {
  margin-top: 30px;
  padding: 15px;
  background-color: #f1f1f1;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

button:hover {
  background-color: #45a049;
}

button:active {
  transform: scale(0.98);
}
</style>
